<template>
    <div
        class="bilibili-user-popover"
        @mouseenter="mouseEnterEvent"
        @mouseleave="mouseLeaveEvent"
    >
        <div
            class="box-avatar"
            :class="{ 'box-avatar-active': userPopoverShow }"
        >
            <img
                :src="userInfo.avatar"
                class="avatar-img"
                alt=""
                @click="go('/user/myset')"
            />
            <img
                v-if="userInfo && userInfo.is_gpt_vip > 0"
                src="~/assets/images/userCenter/vip-king.png"
                class="avatar-icon"
                alt=""
            />
            <!-- <img
                v-else
                src="~/assets/images/userCenter/vip-pariah.png"
                class="avatar-icon"
                alt=""
            /> -->
        </div>

        <transition name="el-fade-in-linear">
            <div
                class="bilibili-user-con"
                v-show="userPopoverShow"
                @click="mouseLeaveEvent"
            >
                <img
                    v-if="userInfo && userInfo.is_gpt_vip > 0"
                    src="~/assets/images/userCenter/vip-king-title.png"
                    class="user-con-name-title"
                    alt=""
                />
                <!-- <div v-else style="height: 15px;"></div> -->
                <img
                    v-else
                    src="~/assets/images/userCenter/vip-pariah-title.png"
                    class="user-con-name-title"
                    alt=""
                />
                <div class="user-con-name">
                    {{ userInfo.nickname }}
                </div>

                <div class="user-con-grid">
                    <!-- <div
                        to="/user/myquiz"
                        class="user-con-grid-item"
                        @click="xzyClick"
                    >
                        {{ userInfo.money }}
                        <div>小竹叶</div>
                    </div> -->
                    <!-- <nuxt-link to="/vipcenter" class="user-con-grid-item">
                        {{ userInfo.money }}
                        <div>小竹叶</div>
                    </nuxt-link> -->
                    <nuxt-link to="/user/mycoupon" class="user-con-grid-item">
                        {{ userInfo.jianghu_coupon }}
                        <div>问答券</div>
                    </nuxt-link>
                    <nuxt-link to="/user/myquiz" class="user-con-grid-item">
                        {{ userInfo.quiznum }}
                        <div>提问</div>
                    </nuxt-link>
                    <nuxt-link to="/user/mycollect" class="user-con-grid-item">
                        {{ userInfo.collect_count }}
                        <div>收藏</div>
                    </nuxt-link>
                </div>
                <div
                    to="/user/myvip"
                    class="user-con-vip-link"
                    @click="set_payVipShow(true)"
                >
                    <div class="vip-right">点击查看</div>
                    <div class="vip-right-text">{{ getVipType }}</div>
                </div>
                <div class="user-con-links">
                    <nuxt-link to="/user/myset" class="user-con-link-item">
                        <img
                            src="~/assets/images/userCenter/my-user.png"
                            alt=""
                        />
                        <div>个人中心</div>
                        <i class="el-icon-arrow-right"></i>
                    </nuxt-link>
                    <nuxt-link
                        to="/user/myserviceorder"
                        class="user-con-link-item"
                    >
                        <img
                            src="~/assets/images/userCenter/my-qfzx.png"
                            alt=""
                        />
                        <div>企服中心</div>
                        <i class="el-icon-arrow-right"></i>
                    </nuxt-link>
                    <nuxt-link to="/user/myanswer" class="user-con-link-item">
                        <img
                            src="~/assets/images/userCenter/my-zyrszx.png"
                            alt=""
                        />
                        <div>专业人士中心</div>
                        <i class="el-icon-arrow-right"></i>
                    </nuxt-link>
                </div>
                <div class="user-con-line"></div>
                <div class="user-con-links">
                    <div class="user-con-link-item" @click="logoutconfirm()">
                        <img
                            src="~/assets/images/userCenter/my-logout.png"
                            alt=""
                        />
                        <div>退出登录</div>
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

import { logout } from "@/assets/api/indexApi.js";
export default {
    name: "bilibiliUserPopover",
    components: {},
    props: {},
    data() {
        return {
            userPopoverShow: false,
            PopoverTime: null,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
            payVipIndex: (state) => state.payVipIndex,
        }),
        getVipType: function () {
            if (!this.userInfo) return;
            if (this.userInfo.is_99vip == 1) return "永久会员";
            else if (this.userInfo.is_gpt_vip == 0)
                return "您当前未开通任何会员";
            else {
                return `${this.userInfo.gpt_vip_end_time_text} 到期`;
            }
        },
    },
    mounted() {},
    watch: {},
    methods: {
        ...mapMutations("common", [
            "setmenuIndex",
            "set_payVipShow",
            "setuserInfo",
            "set_payVipIndex",
        ]),
        // 鼠标移入0.8s后头像
        mouseEnterEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);

            this.PopoverTime = setInterval(() => {
                this.userPopoverShow = true;
                if (this.PopoverTime) clearInterval(this.PopoverTime);
                this.PopoverTime = null;
            }, 300);
        },

        // 鼠标移出头像
        mouseLeaveEvent() {
            if (this.PopoverTime) clearInterval(this.PopoverTime);
            this.PopoverTime = null;
            this.userPopoverShow = false;
        },

        xzyClick() {
            this.set_payVipShow({ show: true, index: 2 });
        },

        //
        logoutconfirm() {
            this.$confirm("是否退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.logout();
            });
        },

        // 退出登录
        async logout() {
            const id = this.userInfo.id;
            const res = await logout({});
            this.$message("已退出登录");
            this.setuserInfo(null);
            // localStorage.removeItem("token");
            // localStorage.removeItem("userInfo");
            // localStorage.removeItem("closeServiceOne");
            // localStorage.removeItem("is_show_userdiscountcoupons");
            localStorage.clear();
            this.$router.push({ path: "/" });
            if (this.goeasyObj)
                this.goeasyObj.pubsub.unsubscribe({
                    channel: id,
                    onSuccess: function () {},
                    onFailed: function (error) {},
                });
        },

        go(url) {
            this.$router.push({
                path: url,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
@keyframes avatarFadeSmall {
    0% {
        transform: scale(2) translate(-13px, 22px);
    }
    60% {
        // opacity: 1;
    }
    100% {
        // opacity: 0;
        transform: scale(1) translateY(0) translate(0);
    }
}
@keyframes avatarFadeLarge {
    0% {
        transform: scale(1) translateY(0) translate(0);
    }
    60% {
        // opacity: 1;
    }
    100% {
        // opacity: 0;
        transform: scale(2) translate(-13px, 22px);
    }
}
.box-avatar {
    animation: avatarFadeSmall 0.35s both;
    position: relative;
    z-index: 1001;
    height: 50px;
    height: 50px;
    border-radius: 100%;
    // border: 1px solid #2d2a2b;
    .avatar-img {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        border: 1px solid #2D2A2B;
        object-fit: cover;
    }
    .avatar-icon {
        position: absolute;
        width: auto;
        height: 25px;
        transform: rotate(45deg);
        top: -11px;
        right: -20px;
    }
}

.box-avatar-active {
    animation: avatarFadeLarge 0.35s both;
}

.bilibili-user-popover {
    height: 40px;
    display: flex;
    align-items: center;
}

.bilibili-user-con {
    width: 280px;
    background: #ffffff;
    // background: #cfe5cd;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding-top: 19px;
    padding-bottom: 8px;
    position: absolute;
    z-index: 1000;
    top: 80px;
    right: calc(50% - 600px);
    overflow: hidden;
    text-align: center;
    > div,
    a {
        padding-top: 8px;
        box-sizing: border-box;
    }
    .user-con-name-title {
        display: block;
        width: auto;
        height: 15px;
        padding-left: 25px;
    }
    .user-con-name {
        text-align: left;
        padding-left: 25px;
        font-size: 16px;
        color: #333333;
        padding-top: 4px;
    }
    .user-con-vip {
        text-align: center;
        display: block;
        box-sizing: border-box;
        img {
            width: 69px;
            height: 20px;
        }
    }
    .user-con-vip-wenda {
        display: inline-block;
        // width: 63px;
        // box-sizing: border-box;
        margin: 0 auto;
        // text-align: center;
        // padding: 4px 6px !important;
        margin-top: 8px;
        // border-radius: 2px;
        // border: 1px solid #fa5151;
        // font-size: 12px;
        // font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        // color: #fa5151;
        .vip_two_to_one {
            width: 64px;
            height: 20px;
            display: block;
        }
    }
    .user-con-grid {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 10px 18px 0;
        .user-con-grid-item {
            padding-top: 8px;
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            text-align: center;
            width: 65px;
            display: block;
            box-sizing: border-box;
            cursor: pointer;
            div {
                font-size: 12px;
                font-weight: 400;
                color: #9e9e9e;
                padding-top: 5px;
            }
        }
    }
    .user-con-vip-link {
        width: 229px;
        height: 60px;
        background-image: url(~/assets/images/userCenter/bilibili-user-vip-bj.png);
        background-size: 100% 100%;
        border-radius: 6px;
        margin: 25px auto 8px;
        cursor: pointer;
        a {
            box-sizing: border-box;
            display: block;
        }

        .vip-right {
            width: 65px;
            height: 22px;
            line-height: 21px;
            text-align: center;
            color: #ffffff;
            background: #3192fc;
            border-radius: 20px;
            font-size: 12px;
            margin-left: 87px;
        }
        .vip-right-text {
            text-align: left;
            color: #3192fc;
            font-size: 12px;
            padding-left: 14px;
            padding-top: 6px;
        }
    }

    .user-con-links {
        .user-con-link-item {
            height: 47px;
            display: flex;
            align-items: center;
            padding: 0 20px 0 38px;
            color: #333333;
            font-size: 12px;
            box-sizing: border-box;
            img {
                width: 16px;
                height: 16px;
                margin-right: 12px;
            }
            div {
                width: 100%;
                text-align: left;
            }
            &:hover {
                background: #f9f9f9;
            }
        }
    }

    .user-con-line {
        width: 227px;
        height: 1px;
        background-color: #e7e7e7;
        margin: 13px auto 0;
        padding: 0;
    }
}
</style>